<template>
  <el-container style="height: 100%">
    <el-main>
      <el-card style="height: 100%">
        <div slot="header" class="clearfix">
          <strong style="font-size: 20px;margin-left: 1%">分享区</strong>
        </div>
        <el-timeline style="margin-top: 16px">
          <el-timeline-item v-for="(info,index) in shares" :key="info.id" :timestamp="info.updatedTime" placement="bottom">
            <el-card class="item" @click.native="gotoShareDetail(info.id)">
              <div class="d-flex align-center">
                <el-avatar size="small" :src="baseUrl + info.avatar"> </el-avatar> <div style="margin-left: 4px;font-size: 16px">{{info.title}}</div>
              </div>
              <div style="font-size: 14px;margin-top: 16px;margin-left: 10px;margin-bottom: 8px">{{render(info.content)}}</div>
              <v-btn
                  @click.stop="like(index)"
                  x-small
                  class="ma-2"
                  text
                  icon
                  :color="info.userLike == true ? likeColor: normalColor">
                <v-icon>mdi-thumb-up</v-icon>
              </v-btn>
              <v-btn
                  @click.stop="collection(index)"
                  x-small
                  class="ma-2"
                  text
                  icon
                  :color="info.collectionLike == true ? likeColor: normalColor">
                <v-icon size="25px">el-icon-star-on</v-icon>
              </v-btn>
              <div style="margin-left: 2%;margin-top: -1%"> <span style="color: gray;"> {{info.thumbsUp < 0 ? 0  : info.thumbsUp}}</span></div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-main>
    <el-aside width="250px" style="margin-top: 20px" v-if="true">
      <el-card style="border-radius: 8px">
        <div slot="header" class="clearfix">
          <h4>热点分享</h4>
        </div>
        <div class="css-fyk6rv-layer1-CardContainer cd" v-for="(info,index) in hotShares" :key="info.id" :timestamp="info.updatedTime" placement="bottom" @click="gotoShareDetail(info.id)">
          <div class="d-flex align-center">
            <div class="css-au84nr-Rank">{{index + 1}}</div>
            <el-avatar size="small" style="margin-left: 8px" :src="baseUrl + info.avatar"> </el-avatar> <div style="margin-left: 4px;font-size: 14px">{{info.title.length > 6 ? info.title.substring(0,6) + "..." : info.title}}</div>
          </div>
          <div style="font-size: 12px;margin-top: 12px;margin-left: 10px;margin-bottom: 2px;color: gray">{{render(info.content)}}</div>
        </div>
      </el-card>
    </el-aside>
  </el-container>
</template>

<script>
import {addCollection, getAllShare, getHotShare, like} from "../../network/Details/share";
import MarkdownIt from "markdown-it";

export default {
  name: "ShareArea",
  data(){
    return {
      shares: [],
      likeColor: 'light-blue',
      normalColor: 'gray',
      hotShares: [],
      baseUrl: this.$store.state.ossBaseUrl
    }
  },
  methods: {
    initial(){
      const _this = this;
      getAllShare().then(res => {
        _this.shares = res.data
      })
      getHotShare().then(res => {
        _this.hotShares = res.data
      })
    },
    render(content){
      let MarkdownIt = require("markdown-it")
      let md = new MarkdownIt()
      let text =  md.render(content).replace(/<[^>]+>/g,"")
      return text.length > 10 ? text.substring(0,10) + "..." : text
    },
    like(index){
     like({username:window.sessionStorage.getItem("username"), shareId: this.shares[index].id, like: !this.shares[index].userLike}, "post")
     this.shares[index].userLike = !this.shares[index].userLike;
      if(this.shares[index].userLike){
        this.shares[index].thumbsUp++;
      }else{
        this.shares[index].thumbsUp--;
      }
    },
    collection(index){
      addCollection({createdUsername:window.sessionStorage.getItem("username"), collectionId: this.shares[index].id, path: "ShareDetail", type: 2,collectionLike: !this.shares[index].collectionLike,username: this.shares[index].username},"post")
      this.shares[index].collectionLike = !this.shares[index].collectionLike
    },
    gotoShareDetail(id){
      console.log(id)
      this.$router.push({
        name:"ShareDetail",
        query:{
          id:id
        }
      })
    }
  },
  created(){
    this.initial()
  }
}
</script>

<style scoped>
.item:hover {
  transform: translateY(-8px);
  transition: transform 0.2s;
  background: Transparent;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.el-container{
  width: 1200px;
  margin: auto;
}
.css-au84nr-Rank {
  font-size: 14px;
  line-height: 20px;
  min-width: 10px;
  font-family: TypoRound;
  font-style: italic;
  font-weight: 700;
  transform: translateY(1px);
  color: rgba(255,161,22, 1);
}
.css-fyk6rv-layer1-CardContainer:hover {
  background: rgba(	126, 126, 126, 0.04);
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(0,0,0, 0.1),0px 2px 8px rgba(0,0,0, 0.08);
  user-select: none;
  padding: 16px 16px 4px;
}
.css-fyk6rv-layer1-CardContainer {
  padding: 16px 16px 4px;
}
.cd .cd:active, .cd:hover, .cd:focus {
  color: rgba(65,145,255, 1);
  text-decoration: none;
}
.cd {
  text-decoration: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  -webkit-text-decoration-skip: objects;
}
</style>
